{% extends 'installer/base_installer.html' %}
{% block title %}Database{% endblock %}
{% block content %}
<h3 class="fw-bold mb-2">Database</h3>
<p class="text-muted mb-4">SQLite is easiest for demo / shared hosting. Use MySQL for production (MAMP, cPanel, VPS).</p>
<form method="post">
  {% csrf_token %}
  <div class="mb-3">
    <label class="form-label fw-semibold">Database type</label>
    <select name="db_engine" id="db_engine" class="form-select">
      <option value="sqlite3" {% if data.db_engine != 'mysql' %}selected{% endif %}>SQLite (recommended for quick start)</option>
      <option value="mysql" {% if data.db_engine == 'mysql' %}selected{% endif %}>MySQL / MariaDB</option>
    </select>
  </div>

  <div id="sqliteFields" class="mb-3">
    <label class="form-label fw-semibold">SQLite file name</label>
    <input type="text" name="db_name" class="form-control" value="{{ data.db_name|default:'db.sqlite3' }}">
  </div>

  <div id="mysqlFields" class="border rounded-3 p-3 mb-3" style="display:none;">
    <div class="row g-3">
      <div class="col-md-6">
        <label class="form-label fw-semibold">Database name</label>
        <input type="text" name="db_name_mysql" id="db_name_mysql" class="form-control" value="{{ data.db_name|default:'academy_lms' }}">
      </div>
      <div class="col-md-6">
        <label class="form-label fw-semibold">Host</label>
        <input type="text" name="db_host" class="form-control" value="{{ data.db_host|default:'127.0.0.1' }}">
      </div>
      <div class="col-md-4">
        <label class="form-label fw-semibold">Port</label>
        <input type="text" name="db_port" class="form-control" value="{{ data.db_port|default:'3306' }}">
        <div class="form-text">MAMP often uses <code>8889</code></div>
      </div>
      <div class="col-md-4">
        <label class="form-label fw-semibold">Username</label>
        <input type="text" name="db_user" class="form-control" value="{{ data.db_user|default:'root' }}">
      </div>
      <div class="col-md-4">
        <label class="form-label fw-semibold">Password</label>
        <input type="password" name="db_password" class="form-control" value="{{ data.db_password|default:'' }}">
      </div>
    </div>
  </div>

  <div class="d-flex gap-2">
    <a href="{% url 'installer:requirements' %}" class="btn btn-outline-secondary">Back</a>
    <button type="submit" class="btn btn-primary flex-grow-1">Continue</button>
  </div>
</form>
{% endblock %}
{% block extra_js %}
<script>
(function(){
  const eng = document.getElementById('db_engine');
  const sqlite = document.getElementById('sqliteFields');
  const mysql = document.getElementById('mysqlFields');
  const nameSqlite = sqlite.querySelector('input[name=db_name]');
  const nameMysql = document.getElementById('db_name_mysql');
  function sync(){
    const isMysql = eng.value === 'mysql';
    mysql.style.display = isMysql ? 'block' : 'none';
    sqlite.style.display = isMysql ? 'none' : 'block';
    nameSqlite.disabled = isMysql;
    if (isMysql) {
      nameSqlite.name = 'db_name_unused';
      nameMysql.name = 'db_name';
    } else {
      nameSqlite.name = 'db_name';
      nameMysql.name = 'db_name_mysql';
    }
  }
  eng.addEventListener('change', sync);
  sync();
})();
</script>
{% endblock %}